/*
 * @Author: xiaosihan 
 * @Date: 2024-08-18 20:12:42 
 * @Last Modified by: xiaosihan
 * @Last Modified time: 2024-09-26 20:46:27
 */


import { Checkbox, Tree, TreeDataNode } from "antd";
import { autorun } from "mobx";
import { ReactNode, useEffect, useState } from "react";
import partCollaborateStore from "../../partCollaborateStore";
import DragModel from "../DragModel/DragModel";
import styles from "./modelTree.module.less";
import meshIconPNG from "./meshIcon.png";
import { last } from "lodash";

interface Iprops {
    children?: ReactNode
}

// 模型树
export default function ModelTree() {

    const [modelLyaer, setModelLyaer] = useState<Array<TreeDataNode & { isMesh: boolean }>>(partCollaborateStore.modelLyaer);
    const [activeId, setActiveId] = useState(partCollaborateStore.activeId);
    const [modelName, setmodelName] = useState(partCollaborateStore.modelName);
    const [hideIds, setHideIds] = useState(partCollaborateStore.hideIds);

    useEffect(() => autorun(() => {
        setHideIds(partCollaborateStore.hideIds);
        setModelLyaer(partCollaborateStore.modelLyaer);
        setActiveId(partCollaborateStore.activeId);
        setmodelName(partCollaborateStore.modelName);
    },{ delay:10 }), []);

    const treeData: Array<TreeDataNode> = [
        {
            title: <>
                <img className={styles.meshIcon} src={meshIconPNG} alt="" />
                {modelName}
            </>,
            key: modelName,
            children: modelLyaer.map((item,i) => {
                return {
                    title: <span key={i}>
                       <Checkbox checked={!hideIds.includes(item.key as string)} />
                       <span className={styles.title}>{item.title as string}</span>
                    </span>,
                    key: item.key,
                };
            }),
        }
    ];

    return (
        <DragModel
            id="model_tree"
            title="模型树"
            orginLeft={50}
            orginTop={50}
        >
            <div className={styles.tree_container}>
                <Tree
                    key={new Date().valueOf()}
                    showLine
                    defaultExpandAll={true}
                    switcherIcon={false}
                    // defaultExpandedKeys={['0-0-0']}
                    selectedKeys={activeId}
                    onSelect={(activeId: Array<any>) => {
                        const id = last(activeId);
                        partCollaborateStore.triggerHideId(id);
                    }}
                    treeData={treeData}
                />
            </div>
        </DragModel>
    );

}